<!doctype html>
<html lang="ja">
 <head> 
  <meta charset="UTF-8"> 
  <title>作品详情</title> 
  <link rel="Shortcut Icon" type="image/x-icon" href="css/favicon.ico"> 
  <link rel="apple-touch-icon-precomposed" href="css/clip_icon.png"> 
  <link rel="stylesheet" type="text/css" href="css/layout.css"> 
  <link rel="stylesheet" type="text/css" href="css/general.css"> 
  <link rel="stylesheet" type="text/css" href="css/index.css"> 
  <link href="css/css" rel="stylesheet"> 
  <link rel="stylesheet" href="./elementui/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/elment.js"></script>
  <style>
    #app {
      width: 1210px;
      margin: 10px auto;
    }
    .img {
      height: 500px;
      margin-bottom: 20px;
      margin: auto;
    }
    .name {
      width: 100%;
      text-align: center;
      font-size: 24px;
      line-height: 40px;
      font-weight: bold;
    }

    .calliphist {
      width: 100%;
      text-align: center;
      font-size: 20px;
      line-height: 30px;
      font-weight: bold;
    }

    .tags {
      text-align: center;
      margin: 10px 0;
    }

    .desc {
      width: 1200px;
      margin: 0 auto;
      line-height: 20px;
      color: #666;
    }

  </style>
 </head> 
 <body> 
  <div id="app">
    <div id="container">
      <header id="gHeader">
        <div class="logo">
          <a href="index.html"><img src="images/logo.png" alt="书法历史长河"></a>
        </div>
        <div class="menu">
          <a href="#"><img src="images/menu.png" alt=""></a>
        </div>
      </header>
      <div class="menuBox">
        <div class="menuContent">
          <div class="close">
            <a href="#"><img src="images/close.png" alt=""></a>
          </div>
          <p>选择</p>
          <ul class="menuUl">
            <li><a href="#"><img src="images/imgtext01.png" alt="ABOUTus"><span>关于我们</span></a></li>
            <li><a href="./3.html"><img src="images/imgtext02.png" alt="works"><span>作品合集</span></a></li>
          </ul>
        </div>
      </div>
      <section id="main">
        <div class="mainBox">
          <ul class="txtList target">
            <li class="off"><a href="4.html">书法家</a>|</li>
            <li class="off"><a href="3.html">作品内容</a>|</li>
            <li class="off"><a href="5.html">趣味知识</a>|</li>
            <li class="off"><a href="6.html">可视化表</a>|</li>
            <li class="off"><a href="7.html">论坛</a></li>
          </ul>
        </div>
      </section>
      <!-- <img :src="currentProperty.a_img" alt=""> -->
      <el-carousel indicator-position="outside" height="500px">
        <el-carousel-item v-for="item in currentProperty.a_img" :key="item">
          <div style="display: flex;">
            <img class="img" :src="item" alt="">
          </div>
          
        </el-carousel-item>
      </el-carousel>
      <div class="name wryh">《{{currentProperty.a_name}}》</div>
      <div class="calliphist wryh">{{ currentProperty.a_calliphist }}</div>
      <div class="tags wryh">
        <span v-if="currentProperty.a_style_name">{{ currentProperty.a_time }}</span>
        <span v-if="currentProperty.a_style_name">{{ currentProperty.a_style_name }}</span>
        <span v-if="currentProperty.a_material_name">{{ currentProperty.a_material_name }}</span>
        <span v-if="currentProperty.a_event_name">{{ currentProperty.a_event_name }}</span>
      </div>
      <div class="desc">
        {{ currentProperty.a_article }}
      </div>
    </div>
  </div>
  <script src="js/jquery.min.js"></script> 
  <script src="js/iscroll.min.js"></script> 
  <script src="js/ofi.min.js"></script> 
  <script src="js/echo.min.js"></script> 
  <script src="js/common.js"></script> 
  <script src="js/jquery.lazyload.min.js"></script> 
  <script src="js/jquery.matchHeight-min.js"></script> 
  <script src="js/placeholder.js"></script> 
  <script src="js/artists.js"></script> 
  <script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
              currentProperty: {}
            }
        },
        mounted() {
          this.currentProperty = JSON.parse(localStorage.getItem('currentProperty'))
          this.currentProperty.a_img = JSON.parse(this.currentProperty.a_img)
          console.log(this.currentProperty)
        },
        methods: {
          
        }
    })
  </script>
  
<!--异步加载部分-->
  <script async src="js/js"></script> 
 
 </body>
</html>